<template>
  <!--设备运行记录查看-->
  <div style="padding: 20px;">
    <el-card class="box-card">
      <div class="clearfix">
        <div class="header">
          <h1>N0TZ37OW-001</h1>
          <div class="actions">
            <el-button>导出</el-button>
            <el-button>打印</el-button>
            <div class="oee-box">
              <div>OEE</div>
              <div>87.62%</div>
            </div>
          </div>
        </div>
        <div class="content">
          <p>登记人：刑秦怀</p>
          <p>登记数据：2025-07-12 10:04:39</p>
        </div>
        <el-divider></el-divider>
        <el-tabs>
          <el-tab-pane label="运行记录">
            <el-card class="box-card2">
              <div slot="header" class="clearfix">
                <span>基本信息</span>
              </div>
              <div>
                <el-row :gutter="20">
                  <el-col :span="12" style="margin-left: 120px;line-height: 2;">
                    <p>单据编号：N0TZ37OW-001</p>
                    <p>登记人：刑秦怀</p>
                    <p>备注：</p>
                  </el-col>
                  <el-col :span="12" style="margin-left: 30px;line-height: 2; width: 35%;">
                    <p>单据日期：2025-07-12</p>
                    <p>所在部门：生产部门</p>
                  </el-col>
                </el-row>
              </div>
            </el-card>
            <!--设备信息-->
            <el-card class="box-card2">
              <div slot="header" class="clearfix">
                <span>设备信息</span>
              </div>
              <div>
                <el-row :gutter="20">
                  <el-col :span="12" style="margin-left: 120px;line-height: 2;">
                    <p>设备名称：液压泵</p>
                    <p>设备类型：液压设备</p>
                    <p>存放位置：车间A区</p>
                  </el-col>
                  <el-col :span="12" style="margin-left: 30px;line-height: 2; width: 35%;">
                    <p>设备编号：YP12345</p>
                    <p>规格型号：HP-250</p>
                    <p>使用部门：生产部</p>
                  </el-col>
                </el-row>
              </div>
            </el-card>
            <!--运行记录-->
            <el-card class="box-card2">
              <div slot="header" class="clearfix">
                <span>运行记录</span>
              </div>
              <div>
                <el-row :gutter="20">
                  <el-col :span="12" style="margin-left: 120px;line-height: 2;">
                    <p>设备开机人：液压泵</p>
                    <p>设备开机时间：液压设备</p>
                    <p>累计运行时间：车间A区</p>
                    <p>实际运行时间：车间A区</p>
                  </el-col>
                  <el-col :span="12" style="margin-left: 30px;line-height: 2; width: 35%;">
                    <p>设备关机人：YP12345</p>
                    <p>设备关机时间：HP-250</p>
                    <p>停机时长(h)：生产部</p>
                    <p>计划运行时长：车间A区</p>
                  </el-col>
                </el-row>
              </div>
            </el-card>
            <!--运行信息-->
            <el-card class="box-card2">
              <div slot="header" class="clearfix">
                <span>运行信息</span>
              </div>
              <div>
                <el-row :gutter="20">
                  <el-col :span="12" style="margin-left: 120px;line-height: 2;">
                    <p>生产班组：液压泵</p>
                    <p>生产日期：液压设备</p>
                    <p>生产数量：车间A区</p>
                    <p>不合格品数量：车间A区</p>
                    <p>理想速度(件/h)：车间A区</p>
                  </el-col>
                  <el-col :span="12" style="margin-left: 30px;line-height: 2; width: 35%;">
                    <p>班次时间：YP12345</p>
                    <p>生产产品：HP-250</p>
                    <p>合格品数量：生产部</p>
                    <p>合格率：车间A区</p>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'RecordPage',
  name: 'EquipmentInfo',
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.actions .el-button {
  margin-left: 10px;
}

.oee-box {
  border: 1px solid #13c2c2;
  padding: 10px;
  text-align: center;
  display: inline-block;
  margin-top: 10px;
  position: relative;
  top: 70px;
  left: -78px;
}

.content {
  margin-bottom: 20px;
}

.box-card {
  width: 1210px;
  margin-left: 14px;
}

.box-card2 {
  margin: 20px;
}
</style>
